<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item>系统首页</el-breadcrumb-item>
  </el-breadcrumb>

  <el-row :gutter="20">
    <el-col :span="6"><div class="grid-content" /></el-col>
    <el-col :span="6"><div class="grid-content" /></el-col>
    <el-col :span="6"><div class="grid-content" /></el-col>
    <el-col :span="6"><div class="grid-content" /></el-col>
  </el-row>

  <el-row :gutter="20">
    <el-col :span="12"><div class="grid-content2" /></el-col>
    <el-col :span="12"><div class="grid-content2" /></el-col>
  </el-row>

  <el-row :gutter="20">
    <el-col :span="12"><div class="grid-content3" /></el-col>
    <el-col :span="12"><div class="grid-content3" /></el-col>
  </el-row>
</template>

<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 20px;
}
.grid-content {
  height: 150px;
  background-color: lightblue;
  border-radius: 10px;
}

.grid-content2 {
  height: 200px;
  background-color: lightblue;
}

.grid-content3 {
  height: 200px;
  background-color: lightblue;
}

.el-row {
  margin-bottom: 20px;
}
</style>
